<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: pink;
				text-align: center;
			}
		</style>
		
		<script>
			window.onload = function(){
				/*点击按钮切换图片*/
				
				
				//切换图片就是要修改img标签的src属性
				
				/*获取img标签*/
				var img = document.getElementsByTagName("img")[0];
				
				//创建一个数组
				var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
				//创建一个变量，用来保存当前正在像是的图片的索引
				var index=0;
				
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
			
			
				//获取id为info的p元素
				var info = document.getElementById("info");
				
				//当点击按钮以后，重新设置信息
				info.innerHTML = "一共" +imgArr.length + "张图片，当前第"+(index+1)+"张";
			
				//为两个按钮分别绑定单机按钮函数
				prev.onclick = function(){
					//切换到上一张
					index--;
					
					//判断index是否< 0
					if(index<0){
						index = imgArr.length-1;
					}
					img.src = imgArr[index];
				};
				
				next.onclick = function(){
					
//					img.src = "img/2.jpg";

					//换到下一张就是index自增
					index++;
					
					if(index > imgArr.length-1){
						index = 0;
					}
					//要修改一个元素的属性元素  元素.属性值
					img.src = imgArr[index];
					
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
					
				};
			
			
			
			
			
			
			
			};
		</script>
	</head>
	<body>
		<div id="outer">
			<p id ="info"></p>
			<img src="img/1.jpg" alt="" />
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</body>
</html>
